<template>
    <div class="card-items">
        <div class="title">
            <img src="@/assets/van-img.png" alt="" />
            <span>10086热线</span>
        </div>
        <div class="tab-btn">
            <span v-for="(item,index) in tabList" :key="index" @click="tabClick(index)" :class="tabIndex == index?'btn-select':'btn-unselect'">{{item.name}}</span>
        </div>
        <div class="desc-panel">
            <div class="left-desc">
                <span class="text1">当月</span>
                <span class="text2">{{monthSatisfaction}}</span>
                <span class="text1">排名</span>
                <span class="text2">{{ranking}}</span>
            </div>
            <div class="right-desc">环比<span style="color:#10CFA5">+0.18%</span></div>
        </div>
        <lineEcharts :chartObj="chartObj" :cindex="index1" />
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import lineEcharts from "@/components/lineEcharts.vue"
export default {
    components: {
        lineEcharts
    },
    setup(props, { emit }) {
        const state = reactive({
            tabList: [{ name: "10086热线诉求解决率" }, { name: "热线满意度" }],
            tabIndex: 0,
            monthSatisfaction: "92.24%",
            ranking: "24",
            chartObj: {
                index1: 1,
                yAxisData: [],
                xAxisData: [],
                title: "解决率",
                lineColor: "#fe9800",
                areaClolor: "#faddc3"
            }
        })
        //一级tab切换
        function tabClick(val) {
            state.tabIndex = val
            emit("changeMsg", state.tabList[val])
            if (val == 0) {
                state.monthSatisfaction = "92.24%"
                state.ranking = "24"
            } else {
                state.monthSatisfaction = "96.24%"
                state.ranking = "10"
            }
        }
        onMounted(() => {
            state.chartObj = {
                yAxisData: [113, 226, 330, 466, 530, 338, 240, 330, 466, 230],
                xAxisData: [
                    "10/01",
                    "10/02",
                    "10/03",
                    "10/04",
                    "10/05",
                    "10/06",
                    "10/07",
                    "10/08",
                    "10/09",
                    "10/10"
                ],
                title: "解决率",
                lineColor: "#fe9800",
                areaClolor: "#faddc3"
            }
        })
        return {
            ...toRefs(state),
            tabClick
        }
    }
}
</script>
<style lang="scss" scoped>
.card-items {
    width: 100%;
    height: 298px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 2px 10px;
    margin-bottom: 10px;
    .title {
        width: 100%;
        display: flex;
        align-items: center;
        span {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
        }
    }
    .tab-btn {
        width: calc(100% - 8px);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 8px 0 0 8px;
        overflow-x: auto;
        .btn-select {
            padding: 6px 13px;
            background: linear-gradient(285deg, #fe6800 0%, #ff9900 100%);
            border-radius: 12px;
            color: #ffffff;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
        .btn-unselect {
            padding: 6px 13px;
            background: #f3f3f3;
            border-radius: 12px;
            color: #333333;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
    }
    .desc-panel {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .left-desc {
            font-size: 14px;
            .text1 {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                margin-right: 6px;
            }
            .text2 {
                font-size: 21px;
                font-weight: bold;
                color: #333333;
                margin-right: 6px;
            }
        }
        .right-desc {
            padding: 0 10px;
            height: 24px;
            line-height: 24px;
            margin-right: 10px;
            background: #fff0dc;
            color: #333333;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>